<template>
<div class="shopcartWrapper">
	<div class="shopcart">
		<div class="content">
			<div class="content-left">
				<div class="logo-wrapper" @click="toggleList">
					<div class="logo" :class="{'highlight':totalCount>0}">
						<i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
					</div>
					<div v-show="totalCount>0" class="num">{{totalCount}}</div>
				</div>
				<div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right" @click="pay">
				<div class="pay" :class="payClass">{{payDesc}}</div>
			</div>
		</div>
		<div class="ball-container">
			<transition v-for="(ball,index) in balls" name="drop"
			@before-enter="beforeEnter" @enter="enter"
			@after-enter="afterEnter" :key="'ball-' + index">
				<div v-show="ball.show" class="ball">
					<div class="inner inner-hook"></div>
				</div>
			</transition>
		</div>
		<transition name="fold">
			<div class="shopcart-list" v-show="unfold">
				<div class="list-header">
					<h4 class="title">购物车</h4>
					<span class="empty" @click="clearList">清空</span>
				</div>
				<div class="list-content" ref="listContent">
					<ul>
						<li class="food" v-for="food in selectFoods">
							<span class="name">{{food.name}}</span>
							<div class="price">
								<span>￥{{food.price*food.count}}</span>
							</div>
							<div class="cartcontrol-wrapper">
								<cartcontrol :food="food"></cartcontrol>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</transition>
	</div>
	<transition name="maskfade">
		<div class="list-mask" v-show="unfold" @click="unfold=false"></div>
	</transition>
</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import cartcontrol from '../cartcontrol/cartcontrol';
	export default {
		props: {
			selectFoods: {
				type:Array,
				default() {
					return [];
				}
			},
			deliveryPrice: {
				type:Number,
				default:0
			},
			minPrice: {
				type:Number,
				default:0
			}
		},
		data() {
			return {
				balls: [
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					}
				],
				dropBalls:[],
				unfold:false
			}
		},
		mounted() {
			let scroll = new BScroll(this.$refs.listContent,{
				click:true
			})
		},
		computed: {
			totalPrice() {
				let total = 0;
				this.selectFoods.forEach((food) => {
					total += food.price * food.count;
				})
				return total;
			},
			totalCount() {
				let count = 0;
				this.selectFoods.forEach((food) => {
					count += food.count;
				});
				return count;
			},
			payDesc() {
				if(this.totalPrice === 0) {
					return `￥${this.minPrice}元起送`;
				} else if (this.totalPrice<this.minPrice) {
					let diff = this.minPrice - this.totalPrice
					return `还差￥${diff}元起送`;
				} else {
					return '去结算';
				}
			},
			payClass() {
				if(this.totalPrice<this.minPrice) {
					return "not-enough";
				} else {
					return "enough";
				}
			}
		},
		methods: {
			drop(el) {
				for(let i=0;i<this.balls.length;i++) {
					let ball = this.balls[i];
					if(!ball.show) {
						ball.show = true;
						ball.el = el;
						this.dropBalls.push(ball);
						return;
					}
				}
			},
			beforeEnter(el) {
				let count = this.balls.length;
				while (count--) {
					let ball = this.balls[count];
					if(ball.show) {
						let rect = ball.el.getBoundingClientRect();
						let x = rect.left - 32;
						let y = -(window.innerHeight - rect.top - 22);
						el.style.display = '';
						el.style.webkitTransform = `translate3d(0,${y}px,0`;
						el.style.transform = `translate3d(0,${y}px,0`;
						let inner = el.getElementsByClassName('inner-hook')[0];
						inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
						inner.style.transform = `translate3d(${x}px,0,0)`;
					}
				}
			},
			enter(el) {
				let theRf = el.offsetHeight;
				this.$nextTick(() => {
					el.style.webkitTransform = 'translate3d(0,0,0)';
					el.style.transform = 'translate3d(0,0,0)';
					let inner = el.getElementsByClassName('inner-hook')[0];
					inner.style.webkitTransform = 'translate3d(0,0,0';
					inner.style.transform = 'translate3d(0,0,0';
				})
			},
			afterEnter(el) {
				let ball = this.dropBalls.shift();
				if(ball) {
					ball.show = false;
					el.style.display = 'none';
				}
			},
			toggleList() {
				if(!this.totalCount) {
					return;
				}
				this.unfold = !this.unfold;
			},
			clearList() {
				this.selectFoods.forEach((food) => {
					food.count = 0;
				})
				this.unfold = !this.unfold;
			},
			pay() {
				if(this.totalPrice < this.minPrice) {
					return;
				}
				window.alert(`支付${this.totalPrice}`)
			}
		},
		components:{
			cartcontrol
		}
	}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import "../../common/stylus/mixin";
	.shopcart
		position:fixed
		left:0
		bottom:0
		z-index:10
		width:100%
		height:48px
		.content
			display:flex
			background: #141d27
			color:rgba(255,255,255,0.4)
			.content-left
				flex:1
				font-size:0
				.logo-wrapper
					display:inline-block
					vertical-align:top
					position:relative
					top:-10px
					margin:0 12px
					padding:6px
					width:56px
					height:56px
					box-sizing:border-box
					border-radius:50%
					background:#141d27
					.logo
						width:100%
						height:100%
						text-align:center
						border-radius:50%
						background:#2b343c
						&.highlight
							background:rgb(0,160,220)
						.icon-shopping_cart
							line-height:44px
							font-size:24px
							color:#80858a
							&.highlight
								color:#fff
					.num
						position:absolute
						top:0
						right:0
						width:24px
						height:16px
						line-height:16px
						text-align:center
						border-radius:16px
						font-size:9px
						font-weight:700
						color:#fff
						background:rgb(240,20,20)
						box-shadow:0 4px 8px 0 rgba(0,0,0,0.4)
				.price
					display:inline-block
					vertical-align:top
					margin-top:12px
					line-height:24px
					padding-right:12px
					box-sizing:border-box
					border-right:1px solid rgba(255,255,255,0.2)
					font-size:16px
					font-weight:700
					&.highlight
						color:#fff
				.desc
					display:inline-block
					vertical-align:top
					margin:12px 0 0 12px
					line-height:24px
					font-size:10px
			.content-right
				flex:0 0 105px
				width:105px
				.pay
					height:48px
					line-height:48px
					text-align:center
					font-size:12px
					font-weight:700
					&.not-enough
						background:#2b343c
					&.enough
						background:#00b43c
						color:#fff
		.ball-container
			.ball
				position:fixed
				left:32px
				bottom:22px
				z-index:15
				transition:all 1s cubic-bezier(.59,-0.3,.93,.66)
				.inner
					width:16px
					height:16px
					border-radius:50%
					background:rgb(0,160,220)
					transition:all 1s linear
		.shopcart-list
			position:absolute
			left:0
			bottom:48px
			z-index:-1
			width:100%
			&.fold-enter-active,&.fold-leave-active
				transition:all 0.5s
			&.fold-enter,&.fold-leave-to
				transform:translate3d(0,100%,0)
			.list-header
				height:40px
				line-height:40px
				padding:0 18px
				background:#f3f5f7
				border-bottom:1px solid rgba(7,17,27,0.1)
				.title
					float:left
					font-size:14px
					color:rgb(7,17,27)
				.empty
					float:right
					font-size:12px
					color:rgb(0,160,220)
			.list-content
				padding:0 18px
				max-height:217px
				overflow:hidden
				background:#fff
				.food
					position:relative
					padding:12px 0
					box-sizing:border-box
					border-1px(rgba(7,17,27,0.1))
					.name
						line-height:24px
						font-size:14px
						color:rgb(7,17,27)
					.price
						position:absolute
						right:90px
						bottom:12px
						line-height:24px
						font-size:14px
						font-weight:700
						color:rgb(240,20,20)
					.cartcontrol-wrapper
						position:absolute
						right:0
						bottom:6px
	.list-mask
		position:fixed
		top:0
		left:0
		z-index:5
		width:100%
		height:100%
		backdrop-filter:blur(10px)
		background:rgba(7,17,27,0.6)
		&.maskfade-enter-active,&.maskfade-leave-active
			transition:all 0.5s
		&.maskfade-enter,&.maskfade-leave-to
			opacity:0


</style>